
<template>
<div class="login">
  <div class="loginHeader">
    <div class="logoContent">
      <div class="logo"></div>
    </div>
  </div>
  <div class="loginContent">
    <el-row>
      <el-col :span="24">
        <div class="content">
          <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px" class="login-container">
            <div class="login-logo"></div>
            <el-form-item prop="accountName">
              <el-input type="text" v-model="loginForm.accountName" auto-complete="off" placeholder="请输入用户名">
                <template slot="prepend"><i class="fa fa-user" aria-hidden="true"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="accountPwd">
              <el-input type="password" v-model="loginForm.accountPwd" @keyup.enter.native="handleSubmit"  auto-complete="off" placeholder="请输入密码">
                <template slot="prepend"><i class="fa fa-lock" aria-hidden="true"></i></template>
              </el-input>
            </el-form-item>
            <el-checkbox v-model="loginForm.state" @change.native.prevent="changeCookie(loginForm)" class="remember">记住用户名</el-checkbox>
            <a href="">忘记密码？</a>
            <el-form-item>
              <el-button class="loginBtn" @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
                <!-- <el-col :span="6" :offset="1">
                  <el-button class="resetBtn" @click.native.prevent="handleReset">重置</el-button>
                </el-col> -->
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="loginFooter">
    <b>Copyright © 2016-2020 <b class="text">JF Healthcare</b>.</b> All rights reserved.
  </div>
</div>
</template>

<script>
import { login, keyPair, getCurrentUserInfo } from "../api/api";
import jquery from "jquery";
import util from "../common/security";
export default {
  data() {
    return {
      logining: false,
      loginForm: {
        accountName: "",
        accountPwd: "",
        state: true
      },
      rules: {
        accountName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        accountPwd: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    handleSubmit() {
      //登录提交
      var _this = this;
      console.log(this);
      this.$refs.loginForm.validate(function(valid) {
        //表单验证

        if (valid) {
          _this.logining = true;

          console.log(1);
          // keyPair().then(function(response) { //密码加密处理
          // var modulus = response.data.ownModulus,
          //     exponent = response.data.exponent;
          // let publicKey = RSAUtils.getKeyPair(exponent, '', modulus);

          // let password = encodeURIComponent(_this.loginForm.accountPwd);
          // password = RSAUtils.encryptedString(publicKey, password);

          let paramData = {
            accountName: _this.loginForm.accountName,
            // accountPwd: password
            accountPwd: _this.loginForm.accountPwd
          };
          login(paramData).then(function(res) {
            //登录请求
            console.log(res);
            console.log(res.data.status);

            if (res.data.status === "200") {
              if (_this.loginForm.state) {
                
                //登录成功存入用户名、密码
                _this.setCookie("username", _this.loginForm.accountName);
                _this.setCookie("password", _this.loginForm.accountPwd);
              }
              getCurrentUserInfo().then(function(data) {
                var userInfo = data.data;
                sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
                _this.$router.push({ path: "/main" }); //登录成功跳转主页面
              });
            } else {
              _this.logining = false;
              _this.$message.error("用户名或密码错误");
            }
          });
          // })
        } else {
          return false;
        }
      });
    },
    setCookie(key, val, time) {
      //设置cookie
      var date = new Date(); //获取当前时间
      var expiresDays = time; //将date设置为n天以后的时间
      console.log(expiresDays);
      date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000); //格式化为cookie识别的时间
      document.cookie = key + "=" + val + ";expires=" + date.toGMTString(); //设置cookie
    },
    getCookie(key) {
      //获取cookie
      /*获取cookie参数*/
      var getCookie = document.cookie.replace(/[ ]/g, ""); //获取cookie，并且将获得的cookie格式化，去掉空格字符
      var arrCookie = getCookie.split(";"); //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
      var tips; //声明变量tips
      for (var i = 0; i < arrCookie.length; i++) {
        //使用for循环查找cookie中的tips变量
        var arr = arrCookie[i].split("="); //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
        if (key == arr[0]) {
          //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
          tips = arr[1]; //将cookie的值赋给变量tips
          break; //终止for循环遍历
        }
      }
      return tips;
    },
    delete(key) {
      //删除cookie
      var date = new Date(); //获取当前时间
      date.setTime(date.getTime() - 10000); //将date设置为过去的时间
      document.cookie = key + "=v; expires =" + date.toGMTString(); //设置cookie
    },
    changeCookie(loginForm) {
      //监听checkbox是否选中
      if (!loginForm.state) {
        this.delete("username");
        this.delete("password");
      }
    }
  },
  mounted() {
    if (this.getCookie("username")) {
      //从缓存中取出用户名
      this.loginForm.accountName = this.getCookie("username");
    }
    if (this.getCookie("password")) {
      //从缓存中取出用户密码
      this.loginForm.accountPwd = this.getCookie("password");
    }
  }
};
</script>

<style scoped>
.loginHeader {
  height: 35px;
  background: #b2bdce;
}
.loginHeader .logoContent {
  padding-top: 5px;
}
.loginHeader .logoContent .logo {
  width: 90px;
  height: 35px;
  margin-left: 10px;
  background: url("../assets/logo.png") no-repeat;
  background-size: 100%;
}
.loginContent .login-logo {
  width: 90px;
  height: 35px;
  margin-bottom: 20px;
  background: url("../assets/logo.png") no-repeat;
  background-size: 100%;
}
.loginContent .content {
  width: 100%;
  height: 670px;
  background: url("../assets/login-bg.jpg") no-repeat;
  background-size: cover;
  position: relative;
}
.loginContent .content .el-form-item {
  margin-bottom: 35px;
}
.loginContent .content a {
  color: #2772db;
  float: right;
  font-size: 15px;
}
.loginContent .content .login-container {
  width: 20%;
  height: 370px;
  background: #fff;
  padding: 20px;
  opacity: 0.95;
  border: solid 1px #eaeaea;
  position: absolute;
  top: 17%;
  margin-left: 40%;
}
.loginContent .content .remember {
  color: #346b97;
  margin-bottom: 10px;
}
.loginContent .content .loginBtn {
  width: 100%;
  color: #fff;
  background: #2f7ab9;
  margin-top: 15px;
}
.loginContent .content .resetBtn {
  width: 100%;
  color: #fff;
  background: #638ccc;
  margin-top: 15px;
  font-size: 13px;
}
.loginFooter {
  color: #444;
  line-height: 45px;
  font-size: 13px;
  text-align: center;
}
.fa-user {
  color: #2f7ab9;
  font-size: 20px;
}
.fa-lock {
  color: #2f7ab9;
  font-size: 20px;
}

.loginFooter .text {
  color: #337ab7;
}
</style>
